<!-- 同比 -->
<template>
    <div class="chart-container">
        <div class="table-search">
            <el-form class="form" :inline="true" style="display: flex; justify-content: space-between;">
                <div>
                    <el-form-item label="时间粒度：" required label-width="100px">
                        <el-select
                            size="small"
                            v-model="timeType"
                            @change="changeTimeType"
                            style="width: 90px"
                        >
                            <el-option label="月" value="month"></el-option>
                            <el-option label="年" value="year"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择时间：" required label-width="100px">
                        <el-date-picker
                            size="small"
                            v-model="time"
                            :type="pickerType"
                            :format="format"
                            value-format="yyyy-MM"
                            :clearable="false"
                            placeholder="选择"
                            @change="changeTimeType"
                        >
                        </el-date-picker>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item style="margin-left: 20px">
                        <el-button 
                            size="small" 
                            type="primary" 
                            @click="search"
                            icon="el-icon-search"
                        >搜索</el-button>
                    </el-form-item>
                    <el-form-item style="margin-left: 20px">
                        <el-button 
                            size="small" 
                            @click="reset"
                            icon="el-icon-refresh-left"
                            type="warning"
                        >重置</el-button>
                    </el-form-item>
                    <!-- <el-form-item style="margin-left: 20px">
                        <el-button @click="search">导出为excel</el-button>
                    </el-form-item> -->
                </div>
            </el-form>
        </div>
        <div class="center">
            <div class="echarts">
                <!-- <h4>同比分析</h4> -->
                <chartYoY
                    height="95%"
                    width="100%"
                    id="one"
                    :xAxisData="xData1"
                    :source="barData1"
                    :legend="legendData1"
                    :yAxisNameLeft="yAxisNameLeft"
                />
                <!-- <bar
                style="width: 70%; height: 385px"
                :source="barSource"
                :legend="barLegend"
                :xAxisData="barxData"
            ></bar> -->
            </div>
        </div>

        <div style="padding-top: 8px">
            <RlTable
                ref="deviceTable"
                :border="false"
                :search="false"
                :showCard="false"
                :is-pagination="false"
                :initData="false"
                :data="list"
            >
                <template #default>
                    <el-table-column prop="time" label="时间"> </el-table-column>
                    <el-table-column prop="value" label="本期数据"> </el-table-column>
                    <el-table-column prop="samePeriodValue" label="上期数据"> </el-table-column>
                    <el-table-column prop="rate" label="同比（%）"> </el-table-column>
                </template>
            </RlTable>
        </div>
    </div>
</template>

<script>
    import { energyConsumptionExport } from '@/api/energyConsumptionComparing'
    import { formatDateFun, timeFormatConvert } from '@/utils/formatData.js'
    import chartYoY from '../echarts/chartYoY.vue'
    import { findEnergySelect } from '@/api/common.js'
    import { consumptionPeriod } from '@/api/contrast.js'
    import dayjs from 'dayjs'

    export default {
        name: 'MixChart',
        components: { chartYoY },
        props: {
            selectedNodesYOY: {
                type: Array,
                default: () => [],
            },
            compareType: {
                type: Number,
            },
            energyType: {
                type: String,
            },
            unit: {
                type: String,
            },
        },
        data() {
            return {
                list: [],

                yAxisNameLeft: '单位（kW·h）',
                //energyType: '',
                energyTypeData: [],
                timeType: 'month',
                time: '',
                pickerType: 'month',
                format: 'yyyy-MM',
                startTime: '',
                endTime: '',

                xData1: [],
                xData2: [],

                barData1: [],
                lineData1: [],
                barData2: [],
                lineData2: [],
                legendData1: [],
            }
        },
        created() {
            this.time = timeFormatConvert(new Date())
            this.startTime = formatDateFun(this.time.toString().substring(0, 7))[0]
            this.endTime = formatDateFun(this.time.toString().substring(0, 7))[1]
            this.getEnergyTypeData()
            //this.getproductData()
        },
        computed: {},
        watch: {},
        methods: {
            reset() {
                //this.energyType = ''
                this.timeType = ''
                this.time = ''
                // this.queryParams.pageSize = 10;
                this.loading = true
                //this.getproductData()
            },
            //改变时间
            changeTimeType() {
                switch (this.timeType) {
                    case 'year':
                        this.pickerType = 'year'
                        this.format = 'yyyy'
                        this.startTime = formatDateFun(this.time.toString().substring(0, 4))[0]
                        this.endTime = formatDateFun(this.time.toString().substring(0, 4))[1]
                        break
                    case 'month':
                        this.pickerType = 'month'
                        this.format = 'yyyy-MM'
                        this.startTime = formatDateFun(this.time.toString().substring(0, 7))[0]
                        this.endTime = formatDateFun(this.time.toString().substring(0, 7))[1]
                        break
                }

                //this.getproductData()
            },
            //切换颗粒度筛选数据
            changeList() {
                //this.getproductData()
                let obj = this.energyTypeData.find((item) => {
                    return item.code === this.energyType
                })
                this.yAxisNameLeft = '单位（' + obj.unit + ')'
            },
            //查询能源类型
            async getEnergyTypeData() {
                const { data: energyOptions } = await findEnergySelect(this.$store.state.projectId)
                this.energyTypeData = energyOptions
                // getfrimInformation('1').then(res => {
                //   res = res.filter(item => item.id !== 7)
                //   this.energyTypeData = res
                // })
            },
            //获取产品信息
            getproductData() {
                if (!this.selectedNodesYOY) {
                    return this.$message.warning('请点击要查询的分项')
                }
                consumptionPeriod({
                    projectId: this.$store.state.projectId,
                    energyTypeCode: this.energyType,
                    timeCode: this.timeType,
                    startDate: this.startTime + ' 00:00:00',
                    endDate: this.endTime + ' 23:59:59',
                    subitemId: this.selectedNodesYOY[0].data.id,
                }).then((res) => {
                    let obj1 = {
                        name: '',
                        type: 'bar',
                        data: [],
                    }
                    let obj2 = {
                        name: '',
                        type: 'bar',
                        data: [],
                    }

                    this.xData1 = []
                    if (res.code === 200) {
                        let barData = res.data.dataList

                        barData.forEach((item) => {
                            this.xData1.push(item.time)
                            obj1.data.push(item.value)
                            obj2.data.push(item.samePeriodValue)
                        })

                        if (this.timeType === 'year') {
                            const date = new Date(this.time)
                            obj1.name = `${date.getFullYear()}年数据`
                            obj2.name = `${date.getFullYear() - 1}年数据`
                        } else if (this.timeType === 'month') {
                            const date = new Date(this.time)
                            obj1.name = `${dayjs().format('YYYY-MM')}月数据`
                            obj2.name = `${dayjs().subtract(1, 'year').format('YYYY-MM')}月数据`
                        }

                        if (barData.length === 0) {
                            this.barData1 = []
                        } else {
                            this.barData1 = [obj1, obj2]
                        }

                        this.list = res.data.dataDetailList
                        this.$refs['deviceTable'].tableData = this.list
                    }
                })
            },
            // 搜素：
            search() {
                this.loading = true
                this.getproductData()
            },
            // 重置：

            exportDate() {
                const data = {
                    compareType: this.compareType,
                    energyType: this.energyType,
                    timeType: this.timeType,
                    startTime: this.startTime,
                    endTime: this.endTime,
                    list: [this.selectedNodesYOY.id],
                }
                energyConsumptionExport(data).then((res) => {
                    var filename = '能耗情况同比分析'
                    var result = res
                    const link = document.createElement('a')
                    let blob = new Blob([result], { type: 'application/vnd.ms-excel' })
                    link.style.display = 'none'
                    link.href = URL.createObjectURL(blob)
                    link.setAttribute('download', filename + '.xls')
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link)
                })
            },
        },
    }
</script>

<style lang="scss" scoped>
    .chart-container {
        position: relative;
        width: 100%;
        height: calc((100vh - 48px) - 130px) !important;
        overflow-y: auto;
    }
    .top {
        margin-top: 15px;
        // display: flex;
        // align-items: center;
        // .title {
        //   height: 100%;
        // }
    }

    .echarts {
        background: linear-gradient(180deg, #032658 0%, #032156 100%);
    }

    .export {
        width: 100px;
        float: right;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .center {
        // height: 88%;
        width: 100%;
        display: flex;
        flex-direction: column;
        // justify-content: space-around;
        div {
            width: 100%;
            height: 300px;
            // overflow: hidden;
            //background: #ffffff;
            // box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
            // border-radius: 10px;
            // padding: 10px;
            h4 {
                text-align: left;
                color: rgba(216, 240, 255, 0.6);
            }
        }
    }

    .table-search ::v-deep .el-form-item {
        margin-bottom: 0!important;
        line-height: 36px !important;
        height: 36px !important;
    }
    .table-search {
        padding: 20px 15px;
    }
    ::v-deep .el-form-item__label {
        line-height: 36px !important;
        height: 36px!important;
    }
    ::v-deep .el-form-item__content {
        line-height: 36px !important;
        height: 36px !important;
    }
</style>
